<template>
	<div class="search_article_wrapper">
		<el-row class="list" :gutter="24" v-loading="loading">
			<template v-if="searchResult.length > 0">
				<el-col :span="8" v-for="(item, index) in searchResult" :key="index">
					<dl>
						<dt><img :src="!item.httpUrl ? siteInfo.bookImg.httpUrl : item.httpUrl" alt="" /></dt>
						<dd>
							<h4 v-html="titleTextFormat(item.name)"></h4>
							<p>{{ item.des }}</p>
							<el-button size="small" plain @click="handleReadBook(item.id)">
								在线阅读
								<i class="el-icon-arrow-right"></i>
							</el-button>
						</dd>
					</dl>
				</el-col>
			</template>
			<template v-else-if="searchResult.length == 0">
				<el-col :span="24">
					<el-empty description="未搜索到任何数据, 请更换搜索词进行搜索"></el-empty>
				</el-col>
			</template>
		</el-row>
		<sw-pagination :total="dataCount" :page.sync="listQuery.page" :limit.sync="listQuery.limit" notice="数据" @change="getSearchResult"></sw-pagination>
	</div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
export default {
	props: {
		columns: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			dataCount: 0,
			listQuery: {
				page: 1,
				limit: 6
			},
			loading: false,
			searchResult: []
		};
	},
	computed: {
		...mapGetters(['siteInfo']),
		searchWord() {
			return this.$route.query.keyword || '';
		}
	},
	watch: {
		searchWord: {
			async handler(val) {
				this.searchValue = val;
				this.loading = true;
				await this.getSearchResult();
				this.loading = false;
			},
			immediate: true
		}
	},
	methods: {
		...mapActions(['getJournalData']),
		//获取搜索结果
		async getSearchResult() {
			let result = await this.getJournalData({ ...this.listQuery, name: this.searchWord });
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.searchResult = !result.data ? [] : [...result.data];
			}
		},

		titleTextFormat(value) {
			if (!value) return value;
			if (this.searchWord.length !== 0) {
				let reg = new RegExp(this.searchWord, 'g');
				let newst = value.replace(reg, '<font>' + this.searchWord + '</font>');
				return newst;
			} else {
				return value;
			}
		},

		//开始阅读书籍
		handleReadBook(id) {
			this.$router.push({
				path: '/books/' + id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.search_article_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	.list ::v-deep {
		flex: 1;
		padding-bottom: 30px;
		.el-col {
			margin-top: 24px;
		}
		dl {
			display: flex;
			padding: 24px;
			border: solid 1px #ebedee;
			&:hover {
				box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
			}
		}
		dt {
			width: 128px;
			height: 172px;
			flex-shrink: 0;
			margin-right: 24px;
		}
		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		dd {
			flex: 1;
			overflow: hidden;
		}
		h4 {
			font-size: 18px;
			height: 20px;
			line-height: 20px;
			margin-bottom: 10px;
			font {
				color: #b00 !important;
			}
		}
		span {
			display: block;
			color: rgba(0, 0, 0, 0.56);
		}
		p {
			display: -webkit-box;
			line-height: 24px;
			margin-top: 14px;
			height: 96px;
			overflow: hidden;
			-webkit-box-orient: vertical;
			line-clamp: 4;
			-webkit-line-clamp: 4;
			color: rgba(0, 0, 0, 0.4);
		}
		.el-button--small {
			float: right;
			margin-top: 10px;
			&:focus,
			&:hover {
				color: #357c65;
				border-color: #357c65;
			}
		}
		.el-icon-arrow-right {
			font-weight: bold;
			color: #357c65;
		}
	}
}
</style>
